<!doctype html>
<html lang="zh-CN">
<head>
<#include "/part_meta.ftl">
<title>客户屏-迈小众</title>
<link href="${st.resDomain}/css/offline.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
#qrcode {margin:auto;padding:auto;text-align: center;width: 105px;padding: 0px 0px 10px;border: 0px solid gray;border-radius: 8px;}
#qrcode table {margin:auto;}
#qrcode img {margin:auto;}
#qrcode div {margin:auto;}
</style>
</head>

<body style="background-image: url('${st.resDomain}/images/bg-cs.jpg');">
<div id="saleContainer" class="container-fluid">
	<div id="moveTipPanel" class="row" style="padding-top:20px;">
		<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6 col-xs-offset-2 col-xs-8">
			<div class="panel panel-primary">
			  <div class="panel-heading">系统提示</div>
			  <div class="panel-body">
			  	<p>请将此窗口拖动至客户屏</p>
			  </div>
			</div>
		</div>
	</div>
	<div id="goodsListPanel" class="row" style="padding-top:20px;display:none;">
		<div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
			<div class="panel panel-primary">
			  <div class="panel-heading">购买商品</div>
			  <div class="panel-body" style="padding-bottom:0px;">
			  	<div id="qrcodeContainer" style="margin-bottom:-70px;overflow:hidden;display:none;">
			  		<div class="pull-left">扫描记账：</div>
			  		<div id="qrcode" class="pull-left"></div>
			  	</div>
			  	<div style="text-align:right;color:red;font-size:50px;padding:0px 10px;"><strong id="totalMoney">999.99</strong></div>
			  </div>
			  <table id="goodsList" class="table table-condensed" style="display:none;">
			    <thead>
			      <tr>
			        <th>#</th>
			        <th class="hidden-sm hidden-xs">条码</th>
			        <th>商品名称</th>
			        <th>单价（元）</th>
			        <th>数量</th>
			        <th>小计（元）</th>
			      </tr>
			    </thead>
			    <tbody>
			      <tr>
			        <th scope="row">-{num}-</th>
			        <td class="hidden-sm hidden-xs">-{code}-</td>
			        <td>-{name}-</td>
			        <td>-{price}-</td>
			        <td>-{amount}-</td>
			        <td>-{cost}-</td>
			      </tr>
			    </tbody>
			  </table>
			</div>
		</div>
	</div>
	<div id="changePanel" class="row" style="padding-top:20px;display:none;">
		<div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
			<div class="panel panel-primary">
			  <div class="panel-heading">结算完成</div>
			  <div class="panel-body" style="padding-bottom:0px;">
			  	<div style="text-align:right;font-size:50px;padding:0px 10px;">找零：<strong id="changeMoney" style="color:red;">999.99</strong></div>
			  </div>
			</div>
		</div>
	</div>
</div>
<div id="adContainer" class="container-fluid" style="display:none;">
	<div class="row" style="display:none;width:100%;position:absolute;">
		<img alt="" src="${st.resDomain}/images/ad_def.jpg" width="100%" height="100%">
	</div>
</div>
<div id="imgAdItemTmp" style="display:none;">
	<div class="row" style="display:none;width:100%;position:absolute;">
		<img alt="" data="-{imgData}-" width="100%" height="100%">
	</div>
</div>
<img id="img-buffer" src="${st.resDomain}/images/logo.png" style="display:none;">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="${st.resDomain}/scripts/require.js"></script>
<script>
require(["${st.resDomain}/scripts/common.js"], function() {
	
	// 屏幕识别#########################
	
	if (screen.availLeft != opener.screen.availLeft || screen.availTop != opener.screen.availTop) {
		$("#moveTipPanel").hide();
		resizeTo(screen.width, screen.height);
	} else {
		$("body").css("overflow", "hidden");
		onblur = function() {
			if (opener.screen.availTop !== screen.availTop || opener.screen.availLeft !== screen.availLeft) {
				moveTo(screen.availLeft, screen.availTop);
				resizeTo(screen.width, screen.height);
				setLocalStorage("clientScreenArgs", screen.availLeft + "," + screen.availTop);
				$("#moveTipPanel").hide();
				$("body").css("overflow", "auto");
				cWin.onblur = null;
			}
		}
	}
	
	// 窗体事件#########################
	
	 window.onbeforeunload = function(b) {
	 	//$("#clientSwitch", opener.document).attr("checked", false);// 无效
	 	//b = b || window.event;	
       	//b.returnValue = true;
       	//return 
    }
	
	// 注册键盘事件: 关闭客户屏
	require(["jwerty"], function() {
		jwerty.key('F12', function () {
			$("#clientSwitch", opener.document).click();
			return false;
		});
	});
	
	// 内容显示#########################
	
	var setting = null;
	var isShowingChange = false;	// 是否正在显示找零
	var goodsItemTemp = $("#goodsList tbody").html();
	var odoc = opener.document;
	
	window.clientShowShoppingQrcode = function(serialCode) {
		// 不显示购物信息,或者不显示二维码
		if (!setting.clientScreen.isShowShoppingInfo || !setting.clientScreen.isShowShoppingQrcode) {
			return;
		}
		$("#qrcodeContainer").show();
		$("#qrcode").empty();
		require(["qrcode"], function() {
			$("#qrcode").qrcode({
				size:100, 
				background:'#fff',
				fill:'#1B3D1B',
				color:'#000',
				radius:0.2,
				minVersion:1,
				maxVersion: 40,
				ecLevel: 'Q',
				label:'迈小众',
				render:'canvas',
				mode:4, 
				image: $("#img-buffer")[0],
				text: g_mobDomain + "/user/memberSpend/addDo?storeId=&serialCode=" + serialCode
			});
		})
	}
	
	
	window.clientChangeGoodsList = function() {
		waitAds();
		
		// 不显示购物信息,或者正在显示找零
		if (!setting.clientScreen.isShowShoppingInfo || isShowingChange) {
			return;
		}
		
		// 金额大于0时才显示
		var totalMoney = parseFloat($("#totalMoney", odoc).html());
		$("#totalMoney").html(totalMoney);
		if (totalMoney > 0) {
			$("#goodsListPanel").fadeIn();
		} else {
			$("#goodsListPanel").hide();
		}
		
		// 不显示列表
		if (!setting.clientScreen.isShowShoppingList) {
			return;
		}
			
		var html = "";
		$("[id^='goods_']", odoc).each(function() {
			var $this = $(this);
			html += goodsItemTemp
			.replace(/\-\{num\}\-/g, $this.find("[id^='tnum_']").html())
			.replace(/\-\{code\}\-/g, $this.find("[id^='tcode_']").html())
			.replace(/\-\{name\}\-/g, $this.find("[id^='tname_']").html())
			.replace(/\-\{price\}\-/g, $this.find("[id^='tprice_']").html() + "&nbsp;/" +$this.find("[id^='tunit_']").html())
			.replace(/\-\{amount\}\-/g, $this.find("[id^='amount']").val())
			.replace(/\-\{cost\}\-/g, $this.find("[id^='tcost']").html());
		});
		
		$("#goodsList tbody").html(html);
		$("#goodsList").show();
		
		// 金额可能为0,但有商品(赠送)时,仍然显示
		if (html) {
			$("#goodsListPanel").fadeIn();
		}
		
	};	
	
	window.clientShowChange = function() {
		// 不显示找零
		if (!setting.clientScreen.isShowShoppingChange) {
			return;
		}
		isShowingChange = true;
		$("#changeMoney").html($("#treturned4Change", odoc).html());
		$("#goodsListPanel").hide();
		$("#changePanel").fadeIn();
	
	};
	
	window.clientHideChange = function() {
		isShowingChange = false;
		$("#changePanel").hide();
		window.clientChangeGoodsList();
	};
	
	window.clientSetSetting = function(set) {
		setting = set;
		opener.showClientShoppingQrcode();
		window.clientChangeGoodsList();
	}
	opener.setClientScreenSetting();
	
	
	// 广告显示#########################
	
	var waitAdIndex = -1;
	var cutAdIndex = -1;
	var imgAdItemTmp = $("#imgAdItemTmp").html();
	
	setAds();
	
	$(window).resize(function() {
		$("#adContainer .row").height($(window).height());
	});
	$(window).resize();
	
	function setAds() {
	
		// 图片广告
		var ads = setting.clientScreen.ads;
		var html = null;
		for (var i in ads) {
			html = imgAdItemTmp
			.replace(/\-\{imgData\}\-/g, ads[i]);
			$("#adContainer").append(html);
		}
		$(window).scroll();// 触发显示图片
		
		//...其它广告
	}
	
	function waitAds() {
		$("#adContainer").hide();
		$("#saleContainer").fadeIn();
				
		clearTimeout(waitAdIndex);
		waitAdIndex = setTimeout(function() {
			showAds();
		}, setting.clientScreen.showAdLazyTime * 1000);	
	}
	
	function showAds() {
		var adNum = $("#adContainer .row").length;
		if (!setting.clientScreen.isShowAd && adNum > 0) {
			return;
		}
		
		$("#saleContainer").fadeOut(function() {
			$("#adContainer").fadeIn();
		});
		
		if (adNum > 1) {
			$("#adContainer .row:eq(-2)").show();
			clearInterval(cutAdIndex);
			cutAdIndex = setInterval(function() {
				$("#adContainer .row:last").prependTo($("#adContainer"));
				$("#adContainer .row:eq(-2)").show();
				$("#adContainer .row:last").fadeOut(2000);
			}, setting.clientScreen.cutAdLazyTime * 1000);
		} else {
			$("#adContainer .row").show();
		}
		
	}
	
});
</script>
</body>
</html>
